<template>
	<view class="content">
		<!-- 通过taskid区分是批量还是单个 -->
		<view class="param-content" v-if="!detail.taskId">
			<view class="param-one">
				<text>柜号</text>
				<view>{{detail.equipCode}}</view>
			</view>
			<view class="param-one">
				<text>升级部件</text>
				<view>{{detail.partTypeName || ''}}</view>
			</view>
			<view class="param-one">
				<text>版本</text>
				<view>{{detail.softwareVersion || ''}}</view>
			</view>
			<view class="param-one">
				<text>升级指令下发结果</text>
				<view>{{detail.result==1?'成功':'失败'}}&nbsp;&nbsp;{{detail.createTime}}</view>
			</view>
			<view class="search_btns">
				<button type="primary" size="mini" @click="isSearchVersion">当前版本查询</button>
			</view>
			<view class="versions">{{updateResult.equipSoftwareVersions | formatVersion}}</view>
		</view>
		<view class="param-content" v-else>
			<view class="param-one">
				<text>升级部件</text>
				<view>{{detail.partTypeName}}</view>
			</view>
			<view class="param-one">
				<text>版本</text>
				<view>{{detail.softwareVersion}}</view>
			</view>
			<view class="param-one">
				<text>升级指令下发时间</text>
				<view>{{detail.createTime}}</view>
			</view>
			<view class="search_btns">
				<button type="primary" size="mini" @click="batchSearchVersion">当前版本批量查询</button>
			</view>

			<view class="table-title head-title">
				柜列表
			</view>
			<view class="table" v-if="tableData.length>0">
				<view class="tr">
					<view class="th width-text">序号</view>
					<view class="th width-text"></view>
					<view class="th"></view>
					<view class="th width-text">操作</view>
				</view>
				<view class="tr" v-for="(item,index) in tableData" :key="index">
					<view class="td width-text indexs">{{index+1}}</view>
					<view class="td width-text">
						<view class="labels">编码</view>
						<view class="labels bordert">升级结果</view>
						<view class="labels bordert">版本比较</view>
						<view class="labels bordert">最新版本</view>
					</view>
					<view class="td">
						<view>{{item.equipCode?item.equipCode:""}}</view>
						<view class="bordert">
							<text v-if="item.result==1">成功</text>
							<text v-if="item.result==0">失败</text>
						</view>
						<view class="bordert" :style="{color:compareVersion(item).length==2?'#67c23a':'#f56c6c'}">
							{{compareVersion(item)}}</view>
						<view class="bordert">{{item.equipSoftwareVersions|formatVersion}}</view>
					</view>
					<view class="td width-text indexs">
						<view class="iconfont icon-copy" v-if="item.equipCode" @click="isCopy(item)"></view>
					</view>
				</view>
			</view>
			<uni-pagination class="pagination" @change="changePage()" :pageSize="logSize" :current="logPage"
				:total="logTotal" :show-icon="true" prev-text="前一页" next-text="后一页" />
			<view class="nodata" v-if="tableData.length == 0">
				<image class="empty_img" src="/static/images/empty.png" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		equipment
	} from "@/api/my.js";
	import {
		doCopy,
	} from "@/common/index.js";
	export default {
		data() {
			return {
				detail: {},
				updateResult: {},
				tableData: [],
				logPage: 1,
				logSize: 10,
				logTotal: 0,
			}
		},
		filters: {
			formatVersion(arr) {
				if (arr && arr.length > 0) {
					let arrayTwo = Object.values(
						arr.reduce((res, item) => {
							res[item.partType] ?
								res[item.partType].push(item) :
								(res[item.partType] = [item]);
							return res;
						}, {})
					);
					let jsons = "";
					arrayTwo.map((item, index) => {
						jsons += item[0].partTypeName != null ? item[0].partTypeName : "";
						item.filter((qq, inx) => {
							jsons += qq.version;
							if (inx < item.length - 1) jsons += " | ";
						});
						if (index < arrayTwo.length - 1) jsons += "；";
					});
					return jsons;
				} else {
					return "";
				}
			}
		},
		onLoad(option) {
			this.detail = JSON.parse(option.detail);
			if (this.detail.taskId) {
				this.getDetail();
			}
		},
		methods: {
			getDetail() {
				this.$Toast.loading('加载中~');
				equipment(`/upgrade/log?taskId=${this.detail.taskId}&pageNum=${this.logPage}&pageSize=${this.logSize}`,
					'get').then(res => {
					if (res.code == 200) {
						this.tableData = res.data;
						this.logTotal = +res.total;
					}
				}).finally(() => uni.hideLoading());
			},
			// 分页
			changePage(e) {
				this.logPage = e.current;
				this.getDetail();
			},
			// 查询版本
			isSearchVersion() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要查询版本吗？',
					success(res) {
						if (res.confirm) {
							that.doSearchUpdate();
						}
					}
				})
			},
			doSearchUpdate() {
				equipment(`/version/list/${this.detail.equipId}?partType=${this.detail.partType}`, 'post').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						this.$set(this.updateResult, 'equipSoftwareVersions', datas)
					}
				})
			},
			// 复制
			isCopy(item) {
				doCopy(item.equipCode);
			},
			// 查询版本
			batchSearchVersion() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要批量查询版本吗？',
					success(res) {
						if (res.confirm) {
							that.batchSearchUpdate();
						}
					}
				})
			},
			batchSearchUpdate() {
				this.$Toast.loading('查询中~');
				let equipIds = this.tableData.map(item => {
					return item.equipId
				});
				equipment(`/version/all?ids=${equipIds.join(',')}&partTypes=${this.detail.partType}`, 'post').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						if (datas && datas.length > 0) {
							datas.forEach(item => {
								this.tableData.forEach((pp, inx) => {
									if (item.code == pp.equipCode) {
										this.$set(this.tableData[inx], 'equipSoftwareVersions',
											item.equipSoftwareVersions);
									}
								})
							})
						}
					}
				}).finally(() => uni.hideLoading())
			},
			
			compareVersion(item) {
				let every = item.equipSoftwareVersions.every(item => {
					return item.version == this.detail.softwareVersion;
				});
				if (every) {
					return "一致";
				}
				return "不一致";
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont.css";
	@import "@/static/css/common.scss";

	.param-content {
		padding: 0 20rpx 70rpx;

		.param-one {
			line-height: 92rpx;
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #E5E5E5;
			font-size: 28rpx;
			color: #333333;

			text {
				width: 240rpx;
			}
		}
	}

	.search_btns {
		text-align: right;
		margin: 20rpx 0;

		button {
			background-color: #51b7b9;
		}
	}

	.versions {
		min-height: 200rpx;
		border: 2rpx solid #dfdfdf;
		padding: 12rpx;
	}

	.table-title {
		margin: 20rpx 0;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.table {
		width: 100%;
		border-radius: 8rpx;
		display: table;
		border: 1px solid #dfdfdf;
		border-collapse: collapse;
		color: #333333;
		font-size: 28rpx;
		margin-bottom: 60rpx;
	}

	.th {
		text-align: center;
		padding: 10rpx 0;
		font-weight: bolder;
		display: table-cell;
		border: 1px solid #dfdfdf
	}

	.td {
		text-align: center;
		background: #FFFFFF;
		padding: 10rpx 0;
		display: table-cell;
		border: 1px solid #dfdfdf;

		view {
			min-height: 50rpx;
		}
	}

	.tr {
		display: table-row;

		.labels {
			width: 150rpx;
		}

		.indexs {
			vertical-align: middle;
		}
	}

	.width-text {
		width: 76rpx;
	}

	.versions {
		padding: 0 10rpx;
		text-align: left;
	}

	.bordert {
		border-top: 2rpx solid #dfdfdf;
		padding-top: 10rpx;
		margin-top: 10rpx;
	}

	.nodata {
		margin: 10% 0 5%;
	}

	.pagination {
		width: 100%;
		position: fixed;
		bottom: 20rpx;
		left: 0;
		background: #FFFFFF;
		padding: 20rpx 0;
	}

	.icon-copy {
		font-size: 36rpx;
		color: #666666;
	}
</style>